<template>
	<view>
		<view class="container">
			<!-- 点击图片触发上传 -->
			<up-image :src="data.avatar_url ? data.avatar_url : src" width="300rpx" height="300rpx" shape="circle" @click="handleChooseImage">
			</up-image>
			<!-- <image class="upload-image" :src="data.avatar_url ? data.avatar_url : src" mode="aspectFit" @click="handleChooseImage" /> -->
			<!-- 隐藏的上传组件 -->
			<input type="file" id="fileInput" style="display: none" bindchange="handleFileChange" />
		</view>
		<up-cell-group>
			<!-- <up-cell title="头像">
			<template #value>
			<up-image :src="data.avatar_url ? data.avatar_url : src" width="70rpx" height="70rpx" shape="circle"> </up-image> -->
			<!-- <up-upload :fileList="register_imageList" @afterRead="afterRead" deletable :maxCount="1"></up-upload> -->
			<!-- </template>
</up-cell> -->
			<up-cell title="微信ID">
				<template #value>
					<up-input border="none" inputAlign="right" disabled disabledColor="#fff" v-model="data.wxopenid"></up-input>
				</template>
			</up-cell>
			<up-cell title="微信号">
				<template #value>
					<up-input border="none" inputAlign="right" disabled disabledColor="#fff" v-model="data.wxid"></up-input>
				</template>
			</up-cell>
			<up-cell title="微信昵称">
				<template #value>
					<up-input border="none" inputAlign="right" type="nickname" v-model="data.wxname"></up-input>
				</template>
			</up-cell>
			<!-- <up-cell title="自定义昵称">
				<template #value>
					<up-input border="none" inputAlign="right" v-model="data.custom_name"></up-input>
				</template>
			</up-cell> -->
			<up-cell title="支付宝用户">
				<template #value>
					<up-input border="none" inputAlign="right" v-model="data.alipay_user"></up-input>
				</template>
			</up-cell>
			<up-cell title="手机号">
				<template #value>
					<up-input border="none" inputAlign="right" v-model="data.phone"></up-input>
				</template>
			</up-cell>
			<up-cell title="是否已认证">
				<template #value>
					<view @click="show = true">
						<up-input disabled disabledColor="#fff" border="none" inputAlign="right" v-model="data.auth"></up-input>
					</view>
					<up-action-sheet
						:actions="list"
						:closeOnClickOverlay="true"
						:closeOnClickAction="true"
						:show="show"
						@close="closeActionList"
						@select="selectClick"
					></up-action-sheet>
				</template>
			</up-cell>
			<!-- <up-cell title="注册时间">
				<template #value>
					<up-input border="none" disabled disabledColor="#fff" inputAlign="right" v-model="data.register_time"></up-input>
				</template>
			</up-cell> -->
		</up-cell-group>
		<view style="margin: 20rpx auto; width: 40%">
			<up-button type="primary" text="确定修改" @click="confirm"></up-button>
		</view>
	</view>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { useUserInfo } from '@/stores/userInfo.js';
import { storeToRefs } from 'pinia';
import { upadteAuth, upadteCustomName, upadteWxname, upadtePhone, upadteAlipayUser, updateUserAvatarUrl } from '@/api/user.js';
import { getWxopenid } from '@/utils/getWxOpenId.js';
import { uploadFileToOSS } from '@/utils/aliyOss.js';
import { exUploadImages } from '@/utils/uploadImages.js';

onMounted(() => {});

const userStore = useUserInfo();

// const { wxopenid, wxid, wxname, phone, alipay_user, avatar_url } = storeToRefs(userStore.userData);
let src = ref('https://cdn.uviewui.com/uview/album/1.jpg');

let data = ref({
	wxopenid: userStore.userData.wxopenid,
	wxid: userStore.userData.wxid,
	wxname: userStore.userData.wxname,
	phone: userStore.userData.phone,
	auth: userStore.userData.auth ? '已认证' : '未认证',
	alipay_user: userStore.userData.alipay_user,
	avatar_url: userStore.userData.avatar_url,
	// custom_name: userStore.userData.custom_name,
	// register_image: userStore.userData.register_image,
	// register_time: userStore.userData.register_time.replace('T', ' '),
});

let wxopenid = reactive(null);
let wxOpId = async () => {
	let resOpenid = await getWxopenid();
	if (resOpenid.success) {
		wxopenid = resOpenid.data.openid;
	}
};

const show = ref(false);
const list = ref([
	{
		name: '未认证',
	},
	{
		name: '已认证',
	},
]);
// 方法
const selectClick = (index) => {
	data.value.auth = index.name;
};
const closeActionList = () => {
	show.value = false;
};

// let avUrl = async (url, size) => {
// 	let url1 = await exUploadImages(url, size, 1);
// 	data.value.avatar_url = url1;
// };
// 点击图片触发上传
const handleChooseImage = () => {
	wx.chooseMedia({
		count: 2,
		mediaType: ['image'],
		success(res) {
			// avUrl(res.tempFiles[0].tempFilePath, res.tempFiles[0].size);
			let lastIndexOf = res.tempFiles[0].tempFilePath.substr(res.tempFiles[0].tempFilePath.lastIndexOf('.'));
			// let newDateTime = Date.parse(new Date());
			let bucketFilePath = userStore.userData.wxopenid + '/avatar/' + 'head' + lastIndexOf;

			// 定义callback函数
			const callback = (err, res) => {
				if (err) {
					uni.$u.toast('头像上传失败');
					return;
				}
				// 更新用户头像
				let link = VITE_OSS_URL + '/' + bucketFilePath;
				data.value.avatar_url = link;
				uni.$u.toast('头像上传成功');
			};

			uploadFileToOSS(res.tempFiles[0].tempFilePath, bucketFilePath, callback);
		},
	});
};

let successSwitchTab = () => {
	setTimeout(() => {
		uni.switchTab({
			url: 'index',
		});
	}, 1000);
};
let confirm = async () => {
	await wxOpId();
	if (userStore.userData.avatar_url != data.value.avatar_url) {
		let res = await updateUserAvatarUrl({ wxopenid, avatarUrl: data.value.avatar_url });
		if (res.success) {
			uni.$u.toast(res.message);
			successSwitchTab();
		}
	}
	if (userStore.userData.phone != data.value.phone) {
		// console.log('不等于原手机号');
		let res = await upadtePhone({ wxopenid, phone: data.value.phone });
		if (res.success) {
			uni.$u.toast(res.message);
			successSwitchTab();
		}
	}
	if (userStore.userData.alipay_user != data.value.alipay_user) {
		// console.log('不等于原支付宝名');
		let res = await upadteAlipayUser({ wxopenid, alipayUser: data.value.alipay_user });
		if (res.success) {
			uni.$u.toast(res.message);
			successSwitchTab();
		}
	}
	if (userStore.userData.wxname != data.value.wxname) {
		// console.log('不等于原微信昵称');
		let res = await upadteWxname({ wxopenid, wxName: data.value.wxname });
		if (res.success) {
			uni.$u.toast(res.message);
			successSwitchTab();
		}
	}
	// if (userStore.userData.custom_name != data.value.custom_name) {
	// 	console.log('不等于原自定义名称');
	// 	let res = await upadteCustomName({ wxopenid, customName: data.value.custom_name });
	// 	if (res.success) {
	// 		uni.$u.toast(res.message);
	// 	}
	// }
	if (userStore.userData.auth != (data.value.auth == '已认证' ? true : false)) {
		console.log(data.value.auth);
		let res = await upadteAuth({ wxopenid, auth: data.value.auth == '未认证' ? false : true });
		if (res.success) {
			uni.$u.toast(res.message);
			successSwitchTab();
		}
	}
	await userStore.setUserData();
};
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 50rpx 0;
}

.upload-image {
	width: 300rpx;
	height: 300rpx;
	background-color: #f0f0f0;
	border: 2rpx dashed #ccc;
	border-radius: 16rpx;
}
</style>
